<template>
  <my-card title="系统公告">
    <template slot>
      <div class="page-card-body">
        <div class="page-header" v-if="userInfo.role==1||userInfo.role==5">
          <el-button type="primary"  @click="hkOpenAdd">新建公告</el-button>
        </div>
        <div v-if="list.length > 0">
          <div class="sys-box" v-for="item in list" :key="item.id">
              <div>
                <div class="sys-title-box">
                  <div class="sys-title-left"></div>
                  <div>{{ item.title }}</div>
                </div>
                <spread class="sys-content-box" :text="item.content"></spread>
                <div class="sys-time-box">{{ item.createTime }}</div>
              </div>
              <div v-if="userInfo.role==1||userInfo.role==5"><el-button type="primary" @click="del(item)">删除</el-button></div>
          </div>
        </div>
        <div v-else>暂无数据</div>
        <div class="pagination-box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageParams.page"
            :page-sizes="[10, 20, 30]"
            :page-size="pageParams.count"
            :total="total"
            layout=" prev, pager, next,sizes,jumper"
          >
          </el-pagination>
        </div>
      </div>
    </template>
  </my-card>
</template>

<script>
import MyCard from "@/components/my-card/index";

import spread from "@/components/Spread/index";
import lineHeader from "@/components/line-header/index";
import { hkGetNoticeList } from "@/api/notice";
import { formatTime } from "@/utils/index";
import {
  isNull,
  hkShowLoading,
  hkHidLoading,
  hkShowSuccessText,
  hkShowErrorText
} from "@/utils/tools";
import {hkDelNotice, hkNewNotice} from "../../../api/notice"
import {mapGetters} from "vuex"
export default {
  components: {
    lineHeader,
    spread,
    MyCard
  },
  props: {},
  data() {
    return {
      total: 0,
      pageParams: {
        page: 1,
        direction: 1,
        count: 10
      },
      list: []
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    hkGetNoticeList() {
      hkShowLoading("加载中...");
      hkGetNoticeList(this.pageParams)
        .then(({ data }) => {
          hkHidLoading();
          this.total = data.total;
          this.list = data.data.map(item => {
            item.createTime = formatTime(item.createTime);
            return item;
          });
        })
        .catch(err => {
          hkHidLoading();
          hkShowErrorText(err.message);
        });
    },
    handleSizeChange(val) {
      this.pageParams.count = val;
      this.hkGetNoticeList();
    },
    handleCurrentChange(val) {
      this.pageParams.page = val;
      this.hkGetNoticeList();
    },
    async del(item) {
      let res = await hkDelNotice({id:item.id});

      this.hkGetNoticeList();
    },
    hkOpenAdd() {
      this.$router.push("/notice/sys/add");
    },
  },
  created() {},
  mounted() {
    this.hkGetNoticeList();


  }
};
</script>
<style lang="scss" scoped>
.page-card-body {
  .sys-box {
    margin: 15px 50px;
    padding: 15px;
    border: 1px solid #d5d8da;
    border-radius: 4px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    .sys-title-box {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
      .sys-title-left {
        background-color: #e91818;
        height: 6px;
        width: 6px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
    .sys-content-box {
      margin: 15px 0;
    }
    .sys-time-box {
      font-size: 12px;
      color: #bbbbbb;
    }
  }
}
</style>
